<template>
	<view>
		<view class="commentPage">
			<view class="shopComment">

				<!-- <view class="commentTag">
					<view class="cur">全部(300)</view>
					<view>图/视频</view>
					<view>颜值高</view>
					<view>发货快</view>
					<view>回头客</view>
				</view> -->
				<view class="commentList">
					<u-empty text="暂无评论" v-if="list.length==0"></u-empty>
					<view class="commentSlide" v-for="(v,i) in list" :key="i">
						<view class="commentUser">
							<view class="userIcon">
								<image :src="v.userPhoto" v-if="v.userPhoto" mode="aspectFill"></image>
								<image v-else src="../../static/shouye/avatar.png" mode="aspectFill"></image>
							</view>
							<text>{{v.name}}</text>
						</view>
						<view class="commentDesc">
							{{v.content}}
						</view>
						<view class="commentPic">
							<image v-for="img in v.imgs" :src="img" mode="widthFix"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="detailFix">
			<view class="buyCar">
				<text>3</text>
				购物车
			</view>
			<view class="detailControl">
				<view class="addCar">
					加入购物车
				</view>
				<view class="exchangeNow">
					立即兑换
				</view>
			</view>
		</view> -->
		<view class="h140"></view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				id: ''
			}
		},
		onLoad(e) {
			this.id = e.id
			this.getEvaluations()
		},
		methods: {
			// 查询商品评价列表
			getEvaluations() {
				this.$http('/api/goods/evaluations', {
					spid: this.id
				}).then((r) => {
					console.log(r)
					this.list = r.data
				})
			},
		}
	}
</script>

<style lang="scss">
	.commentPage {
		padding: 32rpx 32rpx;
	}

	.shopComment {
		border-radius: 6px;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px 0px 15px rgba(230, 230, 230, 1);
		padding: 24rpx 28rpx 20rpx;

		.commentTit {
			display: flex;
			justify-content: space-between;
			align-items: center;
			line-height: 48rpx;
			margin-bottom: 20rpx;

			text {
				font-size: 30rpx;
				color: rgba(51, 51, 51, 1);

				.commentNum {
					margin-left: 10rpx;
				}
			}

			.checkMore {
				font-size: 24rpx;
				color: rgba(151, 151, 151, 1);
				background: url(/static/mall/shop_moreTalk.png) right center no-repeat;
				background-size: 12rpx auto;
				padding-right: 32rpx;
			}
		}
	}

	.commentTag {
		display: flex;
		flex-wrap: wrap;
		gap: 20rpx;
		margin-bottom: 30rpx;

		view {
			padding: 16rpx;
			background: rgba(245, 245, 245, 1);
			border-radius: 6px;
			font-size: 28rpx;
			color: rgba(52, 52, 52, 1);
		}

		.cur {
			background: rgba(255, 238, 241, 1);
			color: rgba(255, 85, 85, 1);
		}
	}

	.commentUser {
		display: flex;
		align-items: center;
		gap: 20rpx;
		margin-bottom: 10rpx;

		.userIcon {
			border-radius: 50%;
			overflow: hidden;

			image {
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
			}
		}

		text {
			font-size: 30rpx;
			color: rgba(51, 51, 51, 1);
		}
	}

	.commentDesc {
		font-size: 30rpx;
		line-height: 48rpx;
		color: rgba(51, 51, 51, 1);
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
	}

	.commentSlide {
		padding-bottom: 20rpx;
		border-bottom: 1px solid rgba(151, 151, 151, .15);
		margin-bottom: 20rpx;

		&:last-child {
			margin-bottom: 0;
			border: none;
		}
	}

	.commentPic {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		gap: 20rpx 20rpx;
		margin-top: 18rpx;

		image {
			width: 190rpx;
			height: 190rpx;
			overflow: hidden;
			border-radius: 12rpx;
		}
	}

	.detailFix {
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 5;
		width: 100%;
		height: 140rpx;
		border-radius: 6px 6px 0 0;
		background: #ffffff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 96rpx;
		padding: 0 40rpx;
	}

	.buyCar {
		background: url(/static/mall/shop_car.png) center top no-repeat;
		background-size: 32rpx auto;
		padding-top: 40rpx;
		line-height: 36rpx;
		font-size: 26rpx;
		color: rgba(48, 49, 51, 1);
		position: relative;

		text {
			display: flex;
			position: absolute;
			background: rgba(252, 56, 80, 1);
			width: 20rpx;
			height: 20rpx;
			border-radius: 50%;
			justify-content: center;
			align-items: center;
			top: 0;
			right: 12rpx;
			font-size: 16rpx;
			color: #ffffff;
		}
	}

	.detailControl {
		display: flex;
		gap: 24rpx;

		view {
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 0 28rpx;
			font-size: 28rpx;
			height: 80rpx;
			border-radius: 80rpx;
		}

		.addCar {
			background: rgba(255, 207, 77, 1);
			color: rgba(48, 49, 51, 1);
		}

		.exchangeNow {
			background: linear-gradient(to right, rgba(255, 137, 1, 1), rgba(255, 83, 37, 1));
			color: #ffffff;
		}
	}

	.h140 {
		height: 140rpx;
	}
</style>